<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博发布</title>
    <link rel="stylesheet" href="css/index_work.css">
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#fbBtn").click(function () {
            //发布功能
            //获取用户输入的标题作者内容
            var title = $("#title").val();
            var author = $("#author").val();
            var content = $("#content").val();
            //将微博信息显示在下方的table中
            var tr = "<tr>";
            tr += "<td><input type='checkbox' class='ck'></td>";
            tr += "<td>" + title + "</td>";
            tr += "<td>" + author + "</td>";
            tr += "<td>" + content + "</td>";
            tr += "<td>" + new Date().toLocaleString() + "</td>";
            tr += "<td><input type='button' value='删除' class='deleteBtn'></td>";
            tr += "</tr>";
            $("#weboList tr:eq(1)").after(tr);
            $(":text").val("");
        });

            //全选
        $("#qx").click(function () {
            $(".ck").prop("checked", true);
        });
        $("#qbx").click(function () {
            $(".ck").prop("checked", false);
        });
            //反选
        $("#fx").click(function () {
            $(".ck").each(function () {
                if (this.checked) {
                    this.checked = false;
                } else {
                    this.checked = true;
                }
            });
        });
            //通过复选框统一控制所有复选框的选中或不选中
        $(":checkbox").click(function () {
            $(".ck").prop("checked", $(this).prop("checked"));
        });
            //将统一操作的复选框和所有复选框的选中或不选中状态保持一致
        $("#weboList").on("click", ".ck", function () {
            if ($(".ck").length == $(".ck:checked").length) {
                $("#selectAll").prop("checked", true);
            } else {
                $("#selectAll").prop("checked", false);
            }


        });
            //删除功能
        $("#weboList").on("click", "。deleteBtn",function () {
            if (confirm("确认删除，啊")) {
                $(this).parent().parent().remove();
            }
        });
            //批量删除功能
        $("#deleteMore").click(function () {
            if (confirm("你确定删除吗")) {
                $(".ck:checked").parent().parent().remove();
            }
        });
    });


    </script>
</head>
<body>

<table>
    <tr>
        <th colspan="2">微博发布</th>
    </tr>
    <tr>
        <td>标题</td>
        <td>
            <input type="text" id="title">
        </td>
    </tr>
    <tr>
        <td>作者</td>
        <td>
            <input type="text" id="author">
        </td>
    </tr>
    <tr>
        <td>内容</td>
        <td>
            <input type="text" id="content">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" id="fbBtn" value="发布">
        </td>
    </tr>
</table>

<table style="margin-top: 50px;" id="weboList">
    <tr>
        <th colspan="6">微博列表</th>
    </tr>
    <tr>
        <th>
            <input type="checkbox" id="selectAll">
        </th>
        <th>标题</th>
        <th>作者</th>
        <th>内容</th>
        <th>发布时间</th>
        <th>操作</th>
    </tr>
    <tr>
        <td colspan="6">
            <input type="button" id="qx" value="全选">
            <input type="button" id="qbx" value="全不选">
            <input type="button" id="fx" value="反选">
            <input type="button" id="deleteMore" value="批量删除">
        </td>
    </tr>
</table>

</body>
</html>